<template>
  <div style="width: 100%">
    <el-select style="margin-left: 10px;margin-top: 10px;"
               v-model="nowMedia"
               @change="onchange">
      <el-option v-for="item in deviceList"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id">
      </el-option>
    </el-select>
    <el-input style="width: 300px;margin-left: 10px;"
              placeholder="调用频率"
              v-model.number="rate">
      <template slot="prepend">每</template>
      <template slot="append">ms调用一次</template>
    </el-input>
    <div>
      <iframe src="/static/index1.html"
              name="myiframe"
              scrolling="auto"
              frameborder="0"
              style="width: 100%; height: 420px;"></iframe>
    </div>
    <div style="text-align: center">
      <el-button @click="click"
                 :disabled="btn.isDisable">{{btn.tit}}</el-button>
    </div>
    <div style="text-align: center">
      <div v-if="userInfo.jobNumber"
           class="userinfo">
        <span>已识别到人脸:</span>
        <div>{{ userInfo.jobNumber }}</div>
        <div>{{ userInfo.name }}</div>
      </div>
      <div v-if="warningmsg"
           style="color: red; font-size: 28px">{{ warningmsg }}</div>
    </div>

    <!-- <el-button @click="unclick">停止识别</el-button> -->

  </div>
</template>
<script>
import axios from 'axios'
import Cookies from 'js-cookie'
import mixinViewModule from '@/mixins/view-module'
import fileUpload from '@/components/file-upload/file-upload'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      timeID: 0,
      url: '',
      warningmsg: '',
      nowMedia: '',
      deviceList: [],
      rate: 2000,
      btn: {
        tit: '开启识别',
        isDisable: false
      },
      userInfo: {}
    }
  },
  components: {
    fileUpload
  },
  watch: {
    deviceList: {
      handler: function (newval) {
        if (newval.length > 0 && !this.nowMedia) {
          this.nowMedia = newval[0].id
        }
      },
      immediate: true
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.deviceList = []
      navigator.mediaDevices.enumerateDevices().then((devices) => {
        devices.forEach((item) => {
          if (item.kind === 'videoinput') {
            this.deviceList.push({ 'name': item.label, 'id': item.deviceId })
          }
        })
      }).catch((e) => {
        console.log(e)
      })
    })
  },
  methods: {
    onchange (val) {
      window.myiframe.getUserMedia({ exact: val })
    },
    click () {
      this.timeID = setInterval(() => {
        this.btn.tit = '识别中'
        this.btn.isDisable = true
        this.warningmsg = ''
        this.userInfo = {}
        let file = window.myiframe.dataURLtoFile()
        const params = new FormData()
        params.append('file', file)
        params.append('confidenceThreshold', '60')
        axios({
          method: 'post',
          url: '/springbootApi/system/sysUser/searchFace',
          headers: {
            token: Cookies.get('housekeeperToken')
          },
          data: params
        }).then(({ data: res }) => {
          if (res.code !== 0) {
            this.userInfo = {}
            this.warningmsg = res.msg
            clearInterval(this.timeID)
          } else if (res.code === 0) {
            if (res.data) {
              this.warningmsg = ''
              this.userInfo = res.data
              clearInterval(this.timeID)
            }
          }
          this.btn.tit = '开始识别'
          this.btn.isDisable = false
        })
      }, this.rate)
    },
    unclick () {
      this.userInfo = {}
      this.warningmsg = ''
      clearInterval(this.timeID)
    }
  }
}
</script>
<style lang="scss" scoped>
::deep .el-input__inner {
  text-align: center;
}
</style>
